<template>
  <view class="my-repair-list">
    <view class="list-header">
      <view class="list-header-left">申请信息</view>
      <view class="list-header-right">处理进度</view>
    </view>
    <view class="repair-list">
      <view
        class="list-content"
        v-for="(item, index) in tableList"
        :key="index"
        v-bind:class="{ bg: index == isActive }"
        @touchstart="listDetailIn(index)"
        @touchend="listDetailGo(item, index)"
      >
        <view class="list-content-left">
          <view class="list-left">
            <view class="list-type">{{ item.name }}</view>
            <view class="list-date">{{ item.apply_time }}</view>
          </view>
        </view>
        <view class="list-content-right"> {{ item.state }} </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      items: ["1", "2", "3"],
      isActive: 0.5,
      openid: "",
      tableList: [],
    };
  },
  onShow() {
    console.log("ddd");
    this.requestData();
  },
  methods: {
    requestData() {
      console.log("555");
      let that = this;
      uni.getStorage({
        key: "openid",
        success: function (res) {
          console.log(res);
          that.openid = res.data;
          that
            .$MyRequest({
              url: "/get_go_out_go",
              method: "POST",
              data: {
                openid: that.openid,
              },
            })
            .then((res) => {
              console.log(res);
              that.tableList = res.data.data;
              // console.log(that.tableList);
              that.tableList = that.tableList.map((s) => {
                if (s.state < 0) {
                  s.state = "不通过";
                }
                if (s.state == "0") {
                  s.state = "待审核";
                }
                if (s.state > 0) {
                  s.state = "已通过";
                }
                return s;
              });
              // that.tableList=that.tableList.filter((s)=>{
              //   return s.state == "申请"
              // })
              // that.tableList.reverse();
              that.tableList = that.tableList.sort((a, b) => {
                return a.id < b.id ? 1 : -1;
              });
              // console.log(that.tableList);
            });
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    //点击样式
    listDetailIn(index) {
      this.isActive = index;
      // console.log(this.isActive);
    },
    //进入详情页
    listDetailGo(item, index) {
      console.log(item);
      this.isActive = 0.5;
      uni.navigateTo({
        url:
          "/pages/home/service/GoOutApply/GoListDetail?editItem=" +
          encodeURIComponent(JSON.stringify(item)),
      });
      console.log(this.isActive + "www");
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.my-repair-list {
  width: 100%;
  height: 100vh;
  background-color: $uni-color-indexBg;

  .list-header {
    display: flex;
    background-color: $uni-color-indexBg;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 10rpx 20rpx;
  }
  .repair-list {
    width: 100%;
    // padding-top: 70rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    background-color: #fff;

    .list-content {
      background-color: #fff;
      // padding: 0 20rpx;
      border-bottom: 1rpx solid rgb(223, 223, 223);
      height: 70px;
      display: flex;
      justify-content: space-between;
      .list-content-left {
        @include center;
        color: $uni-text-color;
        .list-type {
          // color: $uni-text-color;
        }
        .list-date {
          color: $uni-text-color-placeholder;
          font-size: 30rpx;
        }
      }
      .list-content-right {
        @include center;
        color: $uni-color-green;
      }
    }
    .bg {
      background-color: rgba(214, 210, 210, 0.63);
    }
  }
}
</style>
